<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档扫描小程序 - 服务端测试页面</title>
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #07c160;
            text-align: center;
            margin-bottom: 30px;
        }
        .section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 5px;
        }
        h2 {
            margin-top: 0;
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="file"], input[type="text"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #07c160;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #06ad56;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 4px;
            border-left: 4px solid #07c160;
        }
        .result pre {
            margin: 0;
            white-space: pre-wrap;
            word-break: break-all;
        }
        .image-preview {
            max-width: 100%;
            margin-top: 15px;
            border: 1px solid #ddd;
        }
        .status {
            padding: 10px;
            margin-top: 10px;
            border-radius: 4px;
        }
        .status.success {
            background-color: #e8f5e9;
            color: #2e7d32;
        }
        .status.error {
            background-color: #ffebee;
            color: #c62828;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>文档扫描小程序 - 服务端测试页面</h1>
        
        <div class="section">
            <h2>服务器状态</h2>
            <button id="checkStatus">检查服务器状态</button>
            <div id="statusResult" class="status"></div>
        </div>
        
        <div class="section">
            <h2>上传图片</h2>
            <div class="form-group">
                <label for="imageUpload">选择图片文件：</label>
                <input type="file" id="imageUpload" accept="image/*" multiple>
            </div>
            <button id="uploadBtn">上传图片</button>
            <div id="uploadResult" class="result" style="display: none;"></div>
        </div>
        
        <div class="section">
            <h2>图像处理</h2>
            <div class="form-group">
                <label for="processImagePath">图片路径：</label>
                <input type="text" id="processImagePath" placeholder="/uploads/example.jpg">
            </div>
            <button id="processBtn">处理图片</button>
            <div id="processResult" class="result" style="display: none;"></div>
            <img id="processedImage" class="image-preview" style="display: none;">
        </div>
        
        <div class="section">
            <h2>合并为长图</h2>
            <div class="form-group">
                <label for="mergeImagePaths">图片路径列表（每行一个路径）：</label>
                <textarea id="mergeImagePaths" rows="4" style="width: 100%; padding: 8px;" placeholder="/uploads/image1.jpg&#10;/uploads/image2.jpg"></textarea>
            </div>
            <button id="mergeBtn">合并图片</button>
            <div id="mergeResult" class="result" style="display: none;"></div>
            <img id="mergedImage" class="image-preview" style="display: none;">
        </div>
        
        <div class="section">
            <h2>生成PDF</h2>
            <div class="form-group">
                <label for="pdfImagePaths">图片路径列表（每行一个路径）：</label>
                <textarea id="pdfImagePaths" rows="4" style="width: 100%; padding: 8px;" placeholder="/uploads/image1.jpg&#10;/uploads/image2.jpg"></textarea>
            </div>
            <div class="form-group">
                <label for="pdfTitle">PDF标题：</label>
                <input type="text" id="pdfTitle" placeholder="我的文档">
            </div>
            <button id="pdfBtn">生成PDF</button>
            <div id="pdfResult" class="result" style="display: none;"></div>
            <div id="pdfPreview" style="margin-top: 15px;"></div>
        </div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:3000/api';
        
        // 检查服务器状态
        document.getElementById('checkStatus').addEventListener('click', async () => {
            const statusResult = document.getElementById('statusResult');
            statusResult.textContent = '正在检查服务器状态...';
            statusResult.className = 'status';
            
            try {
                const response = await fetch(API_BASE_URL, {
                    method: 'GET'
                });
                
                if (response.ok) {
                    statusResult.textContent = '服务器运行正常！';
                    statusResult.className = 'status success';
                } else {
                    statusResult.textContent = `服务器返回错误: ${response.status} ${response.statusText}`;
                    statusResult.className = 'status error';
                }
            } catch (error) {
                statusResult.textContent = `无法连接到服务器: ${error.message}`;
                statusResult.className = 'status error';
            }
        });
        
        // 上传图片
        document.getElementById('uploadBtn').addEventListener('click', async () => {
            const fileInput = document.getElementById('imageUpload');
            const uploadResult = document.getElementById('uploadResult');
            
            if (fileInput.files.length === 0) {
                alert('请先选择图片文件');
                return;
            }
            
            uploadResult.style.display = 'block';
            uploadResult.innerHTML = '<p>正在上传...</p>';
            
            const formData = new FormData();
            formData.append('image', fileInput.files[0]);
            
            try {
                const response = await fetch(`${API_BASE_URL}/upload`, {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    uploadResult.innerHTML = `
                        <p>上传成功！</p>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                        <img src="${data.data.fullPath}" class="image-preview">
                    `;
                    
                    // 自动填充图片路径到处理表单
                    document.getElementById('processImagePath').value = data.data.path;
                } else {
                    uploadResult.innerHTML = `
                        <p>上传失败：</p>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                }
            } catch (error) {
                uploadResult.innerHTML = `<p>上传出错: ${error.message}</p>`;
            }
        });
        
        // 处理图片
        document.getElementById('processBtn').addEventListener('click', async () => {
            const imagePath = document.getElementById('processImagePath').value.trim();
            const processResult = document.getElementById('processResult');
            const processedImage = document.getElementById('processedImage');
            
            if (!imagePath) {
                alert('请输入图片路径');
                return;
            }
            
            processResult.style.display = 'block';
            processResult.innerHTML = '<p>正在处理图片...</p>';
            processedImage.style.display = 'none';
            
            try {
                const response = await fetch(`${API_BASE_URL}/process`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ imagePath })
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    processResult.innerHTML = `
                        <p>处理成功！</p>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                    
                    processedImage.src = data.data.fullPath;
                    processedImage.style.display = 'block';
                } else {
                    processResult.innerHTML = `
                        <p>处理失败：</p>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                }
            } catch (error) {
                processResult.innerHTML = `<p>处理出错: ${error.message}</p>`;
            }
        });
        
        // 合并图片
        document.getElementById('mergeBtn').addEventListener('click', async () => {
            const imagePathsText = document.getElementById('mergeImagePaths').value.trim();
            const mergeResult = document.getElementById('mergeResult');
            const mergedImage = document.getElementById('mergedImage');
            
            if (!imagePathsText) {
                alert('请输入图片路径');
                return;
            }
            
            const imagePaths = imagePathsText.split('\n').map(path => path.trim()).filter(path => path);
            
            if (imagePaths.length < 2) {
                alert('请至少输入两个图片路径');
                return;
            }
            
            mergeResult.style.display = 'block';
            mergeResult.innerHTML = '<p>正在合并图片...</p>';
            mergedImage.style.display = 'none';
            
            try {
                const response = await fetch(`${API_BASE_URL}/merge`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ imagePaths })
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    mergeResult.innerHTML = `
                        <p>合并成功！</p>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                    
                    mergedImage.src = data.data.fullPath;
                    mergedImage.style.display = 'block';
                } else {
                    mergeResult.innerHTML = `
                        <p>合并失败：</p>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                }
            } catch (error) {
                mergeResult.innerHTML = `<p>合并出错: ${error.message}</p>`;
            }
        });
        
        // 生成PDF
        document.getElementById('pdfBtn').addEventListener('click', async () => {
            const imagePathsText = document.getElementById('pdfImagePaths').value.trim();
            const title = document.getElementById('pdfTitle').value.trim() || '文档';
            const pdfResult = document.getElementById('pdfResult');
            const pdfPreview = document.getElementById('pdfPreview');
            
            if (!imagePathsText) {
                alert('请输入图片路径');
                return;
            }
            
            const imagePaths = imagePathsText.split('\n').map(path => path.trim()).filter(path => path);
            
            if (imagePaths.length === 0) {
                alert('请至少输入一个图片路径');
                return;
            }
            
            pdfResult.style.display = 'block';
            pdfResult.innerHTML = '<p>正在生成PDF...</p>';
            pdfPreview.innerHTML = '';
            
            try {
                const response = await fetch(`${API_BASE_URL}/generate-pdf`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ imagePaths, title })
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    pdfResult.innerHTML = `
                        <p>PDF生成成功！</p>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                    
                    pdfPreview.innerHTML = `
                        <p><a href="${data.data.fullPath}" target="_blank" style="display: inline-block; padding: 10px 15px; background-color: #07c160; color: white; text-decoration: none; border-radius: 4px;">查看PDF</a></p>
                    `;
                } else {
                    pdfResult.innerHTML = `
                        <p>PDF生成失败：</p>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                }
            } catch (error) {
                pdfResult.innerHTML = `<p>PDF生成出错: ${error.message}</p>`;
            }
        });
    </script>
</body>
</html>